
@color_orange: #ffc273;
.top-liuhai-wrap {
  width: 100%;
  background-color: var(--colorTop);
  position: fixed;
  z-index: 2;
}

.top-title-wrap {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: var(--colorTop);
  position: fixed;
  z-index: 2;

  .title {
    font-size: 34rpx;
    display: inline-block;
    position: absolute;
    left: 30rpx;
    top: 50%;
    transform: translate(0, -50%);
    image {
      width: 30rpx;
      height: 30rpx;
      vertical-align: middle;
      margin-right: 5rpx;
    }
    .arrow {
      width: 38rpx;
      height: 38rpx;
      position: relative;
      top: 5rpx;
      margin-left: 5rpx;
      vertical-align: middle;
    }
    .school {
      margin-left: 10rpx;
      vertical-align: middle;
      display: inline-block;
      max-width: 330rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .dot {
      vertical-align: middle;
      margin-left: -30rpx;
      height: 40rpx;
      padding: 0 15rpx;
      line-height: 38rpx;
      display: inline-block;
      color: #fff;
      font-size: 20rpx;
      border-radius: 20rpx;
      background-color: #ff7e17;
      &.change {
        padding: 0 10rpx;
        font-size: 24rpx;
      }
    }
  }
  .find {
    width: 60rpx;
    height: 60rpx;
    position: absolute;
    left: 450rpx;
    top: 50%;
    transform: translate(0, -50%);
    image {
      width: 36rpx;
      height: 36rpx;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}